<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>11_ajax</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js"></script>
<script type="text/babel">
    /*
    需求:
      1. 界面效果如下
      2. 根据指定的关键字在github上搜索匹配的最受关注的库
      3. 显示库名, 点击链接查看库
      4. 测试接口: https://api.github.com/search/repositories?q=r&sort=stars
    */

    class MostStarRepo extends React.Component {
        state = {
            repoName: '',
            repoUrl: ''
        }

        componentDidMount() {
            // 使用axios 发送异步的ajax请求
            const url = `https://api.github.com/xxxsearch/repositories?q=r&sort=stars`;
            axios.get(url).then(response => {
                // 得到数据
                console.log("response", response);
                const repoName = response.items[0]["name"];
                const repoUrl = response.items[0]["html_url"];

                // 更新状态
                this.setState({repoName, repoUrl})
            }).catch((error) => {
                alert(error.message);
            })
            ;

            // 使用fetch发送异步的ajax请求 (fetch是js原生的发送http请求的函数)
            /*fetch(url)
                .then(response => response.json())
                .then(response => {
                        // 得到数据
                        console.log("response", response);
                        const repoName = response.items[0]["name"];
                        const repoUrl = response.items[0]["html_url"];

                        // 更新状态
                        this.setState({repoName, repoUrl})
                    }
                );*/

        }

        render() {

            const {repoName, repoUrl} = this.state;
            if (!repoName) {
                return <h2>loading ......</h2>
            } else {
                return <h2>most star repo is <a href={repoUrl}>{repoName}</a></h2>
            }
        }
    }

    ReactDOM.render(<MostStarRepo/>, document.getElementById("example"));
</script>
</body>
</html>



